<template>
    <div class="ac-user">
      <Layout :style="{padding: '0 24px 24px'}">
        <Breadcrumb :style="{margin: '24px 0'}">
          <BreadcrumbItem><a href="javascript:void(0)" @click="jump('index')">首页</a></BreadcrumbItem>
          <BreadcrumbItem><a href="javascript:void(0)" @click="jump('ac')">鉴权中心</a></BreadcrumbItem>
          <BreadcrumbItem>用户</BreadcrumbItem>
        </Breadcrumb>
        <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
          <div class="ac-header" ghost>
            <div class="ac-header-search">
              <span>搜索条件：</span>
              <Input v-model="search" placeholder="请输入用户昵称..." style="width: 300px"></Input>
              <Button @click="toSearch"><Icon type="md-search" />搜索</Button>
            </div>
            <Button @click="addDrawer=true"><Icon type="md-add" />新增</Button>
            <Button @click="toRefresh"><Icon type="md-sync" />刷新</Button>
          </div>
          <div class="ac-content">
            <Table :loading="loading"  :height="666" :columns="tb_columns" :data="acUser" size="small"></Table>
            <Page :total="acUser_total" :current="acUser_current_page" :page-size="40" @on-change="onChange" @on-page-size-change="onPageSizeChange" show-total show-sizer size="small" style="float:right;margin-top:12px"/>
          </div>
        </Content>
      </Layout>
      <Drawer title="新增用户" :closable="false" v-model="addDrawer" width="30" :mask-closable="false">
        <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="120">
          <FormItem label="用户昵称：" prop="nickname">
            <Input v-model="addForm.nickname" placeholder="请输入用户昵称..."></Input>
          </FormItem>
          <FormItem label="登录账户名：" prop="username">
            <Input v-model="addForm.username" placeholder="请输入用户登录账户名..."></Input>
          </FormItem>
          <FormItem label="登录密码：" prop="password">
            <Input type="password" v-model="addForm.password" placeholder="请输入登录密码..."></Input>
          </FormItem>
          <FormItem label="确认登录密码：" prop="dpassword">
            <Input type="password" v-model="addForm.dpassword" placeholder="请再次输入登录密码..."></Input>
          </FormItem>
          <FormItem label="角色名称：" prop="roleId">
            <Select v-model="addForm.roleId" placeholder="请选择用户的角色...">
              <Option v-for="(item,key) in acRole" :key="key" :value="item.roleId">{{item.roleName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="用户描述：" prop="userDesc">
            <Input v-model="addForm.userDesc" placeholder="请输入用户描述..."></Input>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit('addForm')">提交</Button>
          <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
      <Drawer title="更新用户角色" :closable="false" v-model="updateDrawer" width="30" :mask-closable="false">
        <Form ref="updateForm" :model="addForm" :rules="addRuleVal" :label-width="120">
          <FormItem label="用户昵称：">
            <Input v-model="addForm.nickname" disabled placeholder="请输入用户昵称..."></Input>
          </FormItem>
          <FormItem label="登录账户名：" >
            <Input v-model="addForm.username" disabled placeholder="请输入用户登录账户名..."></Input>
          </FormItem>
          <FormItem label="角色名称：" prop="roleId">
            <Select v-model="addForm.roleId" placeholder="请选择用户的角色...">
              <Option v-for="(item,key) in acRole" :key="key" :value="item.roleId">{{item.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="用户描述：" >
            <Input v-model="addForm.userDesc" disabled placeholder="请输入用户描述..."></Input>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit2('updateForm')">提交</Button>
          <Button @click="handleReset('updateForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
    </div>

</template>

<script>
  import {mapGetters,mapActions} from 'vuex';
  import {toGet,toPost} from "../../utils/MyAxios";
  import md5 from 'js-md5';
  export default {
        name: "ac-user",
        data() {
            return {
              loading:false,
              addForm:{},
              showPwd:false,
              switch1:false,
              updateDrawer:false,
              addRuleVal:{
                nickname: [
                  { required: true, message: '请输入用户昵称', trigger: 'blur' }
                ],
                username: [
                  { required: true, message: '请输入用户登录账户名', trigger: 'blur' }
                ],
                password: [
                  { required: true, message: '请输入登录密码', trigger: 'blur' }
                ],
                dpassword: [
                  { required: true, message: '请再次输入登录密码', trigger: 'blur' }
                ],
                roleId: [
                  { required: true, message: '请选择用户的角色', trigger: 'blur' }
                ],
                userDesc: [
                  { required: true, message: '请输入用户描述', trigger: 'blur' }
                ]
              },
              addDrawer:false,
              search:'',
              tb_columns: [
                {
                  title: '角色ID',
                  key: 'id',
                  align: 'center'
                },
                {
                  title: '创建时间',
                  key: 'createTime',
                  align: 'center'
                },
                {
                  title: '用户昵称',
                  key: 'nickname',
                  align: 'center'
                },
                {
                  title: '用户登录名',
                  key: 'username',
                  align: 'center'
                },
                {
                  title: '角色ID',
                  key: 'roleId',
                  align: 'center'
                },
                {
                  title: '描述',
                  key: 'userDesc',
                  align: 'center'
                },
                {
                  title: '操作',
                  align: 'center',
                  render: (h, params) => {
                    return h('div', [
                        h('Button', {
                          props: {
                            icon: 'md-create',
                            size: 'small'
                          },
                          style: {
                            color: 'black',
                          },
                          on: {
                            click: () => {
                              this.toUpdate(params.row.id)
                            }
                          }
                        }),
                        h('Button', {
                          props: {
                            icon: 'md-trash',
                            size: 'small'
                          },
                          style: {
                            color: 'black',
                          },
                          on: {
                            click: () => {
                              this.toDel(params.row.id)
                            }
                          }
                        })
                    ]);
                  }
                }
              ],
            }
        },
        computed: {
          ...mapGetters(['acUser','acUser_total','acUser_current_page','acUser_page_size','acRole']),
        },
        methods: {
          ...mapActions(['getAcUser','getAcRole']),
          toRefresh(){
            this.getAcUser({
              'search':this.search,
              'currentPage':this.acUser_current_page,
              'pageSize':this.acUser_page_size
            });
          },
          handleSubmit (name) {
            this.$refs[name].validate((valid) => {
              if (valid) {
                if(this.addForm.password!==this.addForm.dpassword){
                  this.$Notice.warning({
                    title: '两次密码不相同',
                    desc: '请确认一致后重试'
                  });
                }else{
                  this.loading=true;
                  let params = {
                    nickname:this.addForm.nickname,
                    username: this.addForm.username,
                    password:md5(this.addForm.password),
                    userDesc :this.addForm.userDesc,
                    roleId:this.addForm.roleId,
                  };
                  console.log(params)
                  toPost('/authentication/user/add',params)
                    .then(res=>{
                      if (res.resultCode === 0) {
                        this.$Notice.success({
                          title: '新增用户成功'
                        });
                        this.$refs[name].resetFields();
                        this.toRefresh();
                        this.addDrawer=false;
                      }else{
                        this.$Notice.error({
                          title: '新增用户失败',
                          desc: '服务器发生未知错误'
                        })
                      }
                    });
                  this.loading=false;
                }
              }
            })
          },
          handleSubmit2 (name) {
            this.$refs[name].validate((valid) => {
              if (valid) {
                if(this.addForm.password!==this.addForm.dpassword){
                  this.$Notice.warning({
                    title: '两次密码不相同',
                    desc: '请确认一致后重试'
                  });
                }else{
                  this.loading=true;
                  let params = {
                    id:this.addForm.id,
                    roleId:this.addForm.roleId,
                  };
                  toPost('/authentication/user/update',params)
                    .then(res=>{
                      if (res.resultCode === 0) {
                        this.$Notice.success({
                          title: '修改用户信息成功'
                        });
                        this.$refs[name].resetFields();
                        this.toRefresh();
                        this.addDrawer=false;
                      }else{
                        this.$Notice.error({
                          title: '修改用户信息失败',
                          desc: '服务器发生未知错误'
                        })
                      }
                    });
                  this.loading=false;
                }
              }
            })
          },
          handleReset (name) {
            this.addDrawer=false;
            this.updateDrawer=false;
            this.$refs[name].resetFields();
          },
          onChange(currentPage){
            this.getAcUser({
              'search':this.search,
              'currentPage':currentPage*1,
              'pageSize':this.acUser_page_size
            });
          },
          onPageSizeChange(pageSize){
            this.getAcUser({
              'search':this.search,
              'currentPage':this.acUser_current_page,
              'pageSize':pageSize*1
            });
          },
          toSearch(){
            this.getAcUser({
              'search':this.search,
              'currentPage':this.acUser_current_page,
              'pageSize':this.acUser_page_size
            });
          },
          toUpdate(id){
            toGet('/authentication/user/queryOne/'+id)
              .then(res=>{
                if (res.resultCode === 0) {
                  this.addForm=res.data;
                  this.updateDrawer=true;
                }else{
                  this.$Notice.warning({
                    title: '获取用户信息失败',
                    desc: '服务器发生未知错误'
                  });
                }
              });

          },
          toDel(id){
            swal({
              title: "您确定删除该用户吗?",
              text: "删除该用户后，系统将删除该用户的所有信息!",
              icon: "warning",
              buttons: ["容我再想想!", "确认删除!"],
              dangerMode: true,
            })
              .then((willDelete) => {
                if (willDelete) {
                  toGet('/authentication/user/delete/'+id)
                    .then(res=>{
                      if (res.resultCode === 0) {
                        swal("删除成功!", {
                          icon: "success",
                        });
                        this.getAcUser({
                          'search':this.search,
                          'currentPage':1,
                          'pageSize':20
                        });
                      }
                    })
                    .catch(error=>{
                      swal("删除失败!", {
                        icon: "error",
                      });
                    });
                }
              });
          }
        },
        mounted() {
          this.getAcUser({
            'search':this.search,
            'currentPage':1,
            'pageSize':20
          });
          this.getAcRole({
            'search':'',
            'currentPage':1,
            'pageSize':20
          })
        }
    }
</script>

<style lang="css" scoped>

</style>
